<!-- 日期选择 -->
<template>
	<view class="vk-data-input-date">
		<!-- 页面开始 -->
		<u-input
			v-if="showInput"
			:value="timeFilterFn()"
			:modelValue="timeFilterFn()"
			:placeholder="placeholder || title"
			:input-align="inputAlign"
			type="select"
			@click="isShow = true"
		/>
		<!--时间选择器 -->
		<u-picker
			mode="time"
			:value="isShow"
			:modelValue="isShow"
			:title="title"
			:safe-area-inset-bottom="true"
			:cancel-color="cancelColor"
			:confirm-color="confirmColor"
			:params="params"
			:start-year="startYear"
			:end-year="endYear"
			:default-time="timeFormatFn()"
			@input="onShowChange"
			@confirm="onConfirm"
		></u-picker>
		<!-- 页面结束 -->
	</view>
</template>

<script>
export default {
	name: "vk-data-input-date",
	emits: ["update:modelValue", "input", "update:show", "change", "confirm"],
	props: {
		// 表单值
		value: {},
		modelValue: {},
		// 是否显示input
		showInput: {
			type: Boolean,
			default: true
		},
		show: {
			type: Boolean,
			default: false
		},
		// 提示
		placeholder: {
			Type: String,
			default: "请选择时间"
		},
		cancelColor: {
			Type: String,
			default: "#606266"
		},
		confirmColor: {
			Type: String,
			default: "#2979ff"
		},
		params: {
			Type: Object,
			default() {
				return {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				};
			}
		},
		startYear: {
			Type: [String, Number],
			default: 1900
		},
		endYear: {
			Type: [String, Number],
			default: 2100
		},
		title: {
			Type: [String],
			default: "请选择时间"
		},
		inputAlign: {
			Type: String
		}
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {
			isShow: false
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		// 初始化
		init() {},
		// 向父组件发送更新value事件
		_updateValue(value) {
			this.$emit("input", value);
			this.$emit("update:modelValue", value);
			this.$emit("change", value);
		},
		onShowChange(value) {
			let that = this;
			that.isShow = value;
			that.$emit("update:show", value);
		},
		// 监听 - 确认事件
		onConfirm(e) {
			let that = this;
			let value = that.getData(e);
			that._updateValue(value);
			e.value = value;
			that.$emit("confirm", e);
		},
		getDateTime(obj){
			let year = obj.year;
			let month = obj.month;
			let day = obj.day;
			let hour = obj.hour;
			let minute = obj.minute;
			let second = obj.second;
			let text = "";
			if (year) {
				text += year;
			}
			if (month) {
				text += "/" + month;
			} else{
				text += "/" + "01";
			}
			if (day) {
				text += "/" + day;
			} else{
				text += "/" + "01";
			}
			if (hour) {
				text += " " + hour;
			}
			if (minute) {
				text += ":" + minute;
				// 这个地方取到的值已经变成18,为什么另外一个地方收到的值是null
			}
			if (second) {
				text += ":" + second;
			}
			text = text.trim();
			return new Date(text).getTime();
		},
		getTimeStr(obj){
			let hour = obj.hour;
			let minute = obj.minute;
			let second = obj.second;
			let text = "";
			if (hour) {
				text += " " + hour;
			}
			if (minute) {
				text += ":" + minute;
			}
			if (second) {
				text += ":" + second;
			}
			text = text.trim();
			return text;
		},
		getData(obj) {
			let that = this;
			if (that.params.year) {
				return that.getDateTime(obj);
			} else {
				return that.getTimeStr(obj);
			}
		},
		timeFormatFn() {
			let that = this;
			let { vk, valueCom } = that;
			if (that.params.year) {
				return vk.pubfn.timeFormat(valueCom);
			} else {
				return valueCom;
			}
		},
		timeFilterFn() {
			let that = this;
			let { params = {}, valueCom } = that;
			let s = that.timeFormatFn(valueCom);
			let str = "";
			if (s) {
				let num = 0;
				let { year, month, day, hour, minute, second } = params;
				if (year) num = 4;
				if (month) num = 7;
				if (day) num = 10;
				if (hour) num = 16;
				if (minute) num = 16;
				if (second) num = 19;
				str = s.substring(0, num);
			}
			return str;
		}
	},
	// 监听器
	watch: {
		show(newVal) {
			this.isShow = newVal;
		}
	},
	// 计算属性
	computed: {
		valueCom() {
			// #ifndef VUE3
			return this.value;
			// #endif

			// #ifdef VUE3
			return this.modelValue;
			// #endif
		}
	}
};
</script>

<style lang="scss" scoped>
.vk-data-input-date {
	position: relative;
	-webkit-box-flex: 1;
	padding: 0px;
	border-color: rgb(220, 223, 230);
	text-align: left;
	width: 100%;
}
</style>
